<!DOCTYPE html>
<html lang="en">
<head>
    <title>Matrix Admin</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/uniform.css"/>
    <link rel="stylesheet" href="css/select2.css"/>
    <link rel="stylesheet" href="css/matrix-style.css"/>
    <link rel="stylesheet" href="css/matrix-media.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet"/>

</head>
<body>

<!--Header-part-->
<div id="header">
    <h1><a href="dashboard.html">Matrix Admin</a></h1>
</div>
<!--close-Header-part-->

<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
    <ul class="nav">
        <li class="dropdown" id="profile-messages">
            <a title="" href="javascript:" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>
                <span class="text">Welcome User</span><b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="javascript:"><i class="icon-user"></i> My Profile</a></li>
                <li class="divider"></li>
                <li><a href="javascript:"><i class="icon-check"></i> My Tasks</a></li>
                <li class="divider"></li>
                <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
            </ul>
        </li>
        <li class="dropdown" id="menu-messages">
            <a href="javascript:" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i>
                <span class="text">Messages</span> <span class="label label-important">5</span>
                <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a class="sAdd" title="" href="javascript:"><i class="icon-plus"></i> new message</a></li>
                <li class="divider"></li>
                <li><a class="sInbox" title="" href="javascript:"><i class="icon-envelope"></i> inbox</a></li>
                <li class="divider"></li>
                <li><a class="sOutbox" title="" href="javascript:"><i class="icon-arrow-up"></i> outbox</a></li>
                <li class="divider"></li>
                <li><a class="sTrash" title="" href="javascript:"><i class="icon-trash"></i> trash</a></li>
            </ul>
        </li>
        <li class=""><a title="" href="javascript:"><i class="icon icon-cog"></i> <span class="text">Settings</span></a>
        </li>
        <li class=""><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">Logout</span></a>
        </li>
    </ul>
</div>

<!--start-top-serch-->
<div id="search">
    <input type="text" placeholder="Search here..."/>
    <button type="submit" class="tip-bottom" title="Search"><i class="icon-search icon-white"></i></button>
</div>
<!--close-top-serch-->

<!--sidebar-menu-->

<div id="sidebar"><a href="javascript:" class="visible-phone"><i class="icon icon-list"></i>Forms</a>
    <ul>
        <li><a href="index.html"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
        <li><a href="charts.html"><i class="icon icon-signal"></i> <span>Charts &amp; graphs</span></a></li>
        <li><a href="widgets.html"><i class="icon icon-inbox"></i> <span>Widgets</span></a></li>
        <li><a href="tables.html"><i class="icon icon-th"></i> <span>Tables</span></a></li>
        <li><a href="grid.html"><i class="icon icon-fullscreen"></i> <span>Full width</span></a></li>
        <li class="submenu active"><a href="javascript:"><i class="icon icon-list"></i> <span>Forms</span>
            <span class="label label-important">3</span></a>
            <ul>
                <li><a href="form-common.html">Basic Form</a></li>
                <li><a href="form-validation.html">Form with Validation</a></li>
                <li><a href="form-wizard.html">Form with Wizard</a></li>
            </ul>
        </li>
        <li><a href="buttons.html"><i class="icon icon-tint"></i> <span>Buttons &amp; icons</span></a></li>
        <li><a href="interface.html"><i class="icon icon-pencil"></i> <span>Eelements</span></a></li>
        <li class="submenu"><a href="javascript:"><i class="icon icon-file"></i> <span>Addons</span>
            <span class="label label-important">5</span></a>
            <ul>
                <li><a href="index2.html">Dashboard2</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="chat.html">Chat option</a></li>
            </ul>
        </li>
        <li class="submenu"><a href="javascript:"><i class="icon icon-info-sign"></i> <span>Error</span>
            <span class="label label-important">4</span></a>
            <ul>
                <li><a href="error403.html">Error 403</a></li>
                <li><a href="error404.html">Error 404</a></li>
                <li><a href="error405.html">Error 405</a></li>
                <li><a href="error500.html">Error 500</a></li>
            </ul>
        </li>
        <li class="content"><span>Monthly Bandwidth Transfer</span>
            <div class="progress progress-mini progress-danger active progress-striped">
                <div style="width: 77%;" class="bar"></div>
            </div>
            <span class="percent">77%</span>
            <div class="stat">21419.94 / 14000 MB</div>
        </li>
        <li class="content"><span>Disk Space Usage</span>
            <div class="progress progress-mini active progress-striped">
                <div style="width: 87%;" class="bar"></div>
            </div>
            <span class="percent">87%</span>
            <div class="stat">604.44 / 4000 MB</div>
        </li>
    </ul>
</div>
<div id="content">
    <div id="content-header">
        <div id="breadcrumb">
            <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
            <a href="javascript:">Form elements</a> <a href="javascript:" class="current">Validation</a></div>
        <h1>表单验证</h1>
    </div>
    <div class="container-fluid">
        <hr>
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title">
                        <h5>步骤向导</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <div class="stepDiv">
                            <ul class="ui-step">
                                <li>
                                    <div class="ui-step-line"></div>
                                    <div class="ui-step-title">
                                        <span class="ui-step-number">1</span>
                                        <span class="ui-step-text">添加试卷</span>
                                    </div>
                                </li>
                                <li class="active">
                                    <div class="ui-step-line"></div>
                                    <div class="ui-step-title">
                                        <span class="ui-step-number">2</span>
                                        <span class="ui-step-text">添加试题</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="ui-step-line"></div>
                                    <div class="ui-step-title">
                                        <span class="ui-step-number">3</span>
                                        <span class="ui-step-text">完成</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="ui-step-content" style="min-height: 500px;padding-bottom: 15px;">
                                <div class="ui-step-pane">
                                    添加试卷
                                    <a class="btn btn-primary ui-step-next">下一步</a>
                                </div>
                                <div class="ui-step-pane active">
                                    <div class="question-list-wrapper">
                                        <div class="question-wrapper" data-id="C111">
                                            <div class="question-inner">
                                                <p class="question-title">应当注意字体的。</p>
                                                <ul class="option">
                                                    <li class="selected">正面朝向对方</li>
                                                    <li>侧面朝向对方</li>
                                                    <li>背面朝向对方</li>
                                                </ul>
                                                <p class="question-answer">答案：A</p>
                                                <p class="question-analysis">解析：无</p>
                                                <div class="question-score-wrapper">
                                                    <input type="number" name="score" value="5" title="试题分数">分
                                                </div>
                                                <a class="edit" href="javascript:"><i class="icon-edit"></i>编辑</a>
                                                <a class="remove" href="javascript:"><i class="icon-trash"></i>删除</a>
                                                <a class="up" href="javascript:"><i class="icon-chevron-up"></i>上移</a>
                                                <a class="down" href="javascript:"><i class="icon-chevron-down"></i>下移</a>
                                            </div>
                                        </div>
                                        <div class="question-wrapper" data-id="B321">
                                            <div class="question-inner">
                                                <p class="question-title">递接文件或名片时</p>
                                                <ul class="option">
                                                    <li class="selected">正面朝向对方</li>
                                                    <li>侧面朝向对方</li>
                                                    <li>背面朝向对方</li>
                                                </ul>
                                                <p class="question-answer">答案：A</p>
                                                <p class="question-analysis">解析：无</p>
                                                <div class="question-score-wrapper">
                                                    <input type="number" name="score" value="5" title="试题分数">分
                                                </div>
                                                <a class="edit" href="javascript:"><i class="icon-edit"></i>编辑</a>
                                                <a class="remove" href="javascript:"><i class="icon-trash"></i>删除</a>
                                                <a class="up" href="javascript:"><i class="icon-chevron-up"></i>上移</a>
                                                <a class="down" href="javascript:"><i class="icon-chevron-down"></i>下移</a>
                                            </div>
                                        </div>
                                        <div class="question-wrapper" data-id="A123">
                                            <div class="question-inner">
                                                <p class="question-title">哈哈哈哈</p>
                                                <ul class="option">
                                                    <li class="selected">正面朝向对方</li>
                                                    <li>侧面朝向对方</li>
                                                    <li>背面朝向对方</li>
                                                </ul>
                                                <p class="question-answer">答案：A</p>
                                                <p class="question-analysis">解析：无</p>
                                                <div class="question-score-wrapper">
                                                    <input type="number" name="score" value="5" title="试题分数">分
                                                </div>
                                                <a class="edit" href="javascript:"><i class="icon-edit"></i>编辑</a>
                                                <a class="remove" href="javascript:"><i class="icon-trash"></i>删除</a>
                                                <a class="up" href="javascript:"><i class="icon-chevron-up"></i>上移</a>
                                                <a class="down" href="javascript:"><i class="icon-chevron-down"></i>下移</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="addQuestionWrapper">
                                        <a class="btn btn-primary btn-add-title" href="javascript:">添加试题</a>

                                    </div>
                                    <a class="btn btn-primary ui-step-prev">上一步</a>
                                    <a class="btn btn-primary" id="savePaper">保存</a>
                                </div>
                                <div class="ui-step-pane">
                                    完成
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title">
                        <h5>表单验证</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" novalidate="novalidate">
                            <div class="control-group">
                                <label class="control-label">Your Name</label>
                                <div class="controls">
                                    <input type="text" name="required" id="required">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Your Email</label>
                                <div class="controls">
                                    <input type="text" name="email" id="email">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Date (only Number)</label>
                                <div class="controls">
                                    <input type="text" name="date" id="date">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">URL (Start with http://)</label>
                                <div class="controls">
                                    <input type="text" name="url" id="url">
                                </div>
                            </div>
                            <div class="form-actions">
                                <input type="submit" value="Validate" class="btn btn-success">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-box">
                    <div class="widget-title"><span class="icon"> <i class="icon-info-sign"></i> </span>
                        <h5>Numeric validation</h5>
                    </div>
                    <div class="widget-content nopadding">
                        <form class="form-horizontal" method="post" action="#" name="number_validate" id="number_validate" novalidate="novalidate">
                            <div class="control-group">
                                <label class="control-label">Minimal Salary</label>
                                <div class="controls">
                                    <input type="text" name="min" id="min"/>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Maximum Salary</label>
                                <div class="controls">
                                    <input type="text" name="max" id="max"/>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Only digit</label>
                                <div class="controls">
                                    <input type="text" name="number" id="number"/>
                                </div>
                            </div>
                            <div class="form-actions">
                                <input type="submit" value="Validate" class="btn btn-success">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-title"><span class="icon"> <i class="icon-info-sign"></i> </span>
                            <h5>Security validation</h5>
                        </div>
                        <div class="widget-content nopadding">
                            <form class="form-horizontal" method="post" action="#" name="password_validate" id="password_validate" novalidate="novalidate">
                                <div class="control-group">
                                    <label class="control-label">Password</label>
                                    <div class="controls">
                                        <input type="password" name="pwd" id="pwd"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Confirm password</label>
                                    <div class="controls">
                                        <input type="password" name="pwd2" id="pwd2"/>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <input type="submit" value="Validate" class="btn btn-success">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12"> 2013 &copy; Matrix Admin. Brought to you by
        <a href="#">Gallonce</a>
    </div>
</div>
<!--end-Footer-part-->


<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.custom.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.uniform.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/matrix.js"></script>
<script src="js/matrix.form_validation.js"></script>
<script>
    (function () {
        var questionListWrapper = $('.question-list-wrapper');

        // 上一步
        $('.ui-step-prev').on('click', function () {
            var step = $('.ui-step li.active'),
                stepPane = $('.ui-step-pane.active');
            step.removeClass('active').prev().addClass('active');
            stepPane.removeClass('active').prev().addClass('active');
        });

        // 下一步
        $('.ui-step-next').on('click', function () {
            var step = $('.ui-step li.active'),
                stepPane = $('.ui-step-pane.active');
            step.removeClass('active').next().addClass('active');
            stepPane.removeClass('active').next().addClass('active');
        });

        // 添加试题
        $('.btn-add-title').on('click', function () {
            $('.btn-add-title').hide();
            $('.addQuestionWrapper').addClass('active').html(questionEditTpl());
        });

        // 选择题型
        $(document).on('change', '.questionForm .question-type', function () {
            var val = $(this).val();
            if (val !== null) {
                $(this).siblings('.question-setting-wrapper').find('.question-type-pane.active').removeClass('active');
                $(this).siblings('.question-setting-wrapper').find('.question-type-pane[data-type="' + val + '"]').addClass('active');
            }
        });

        // 判断题选择初始化
        $(document).on('click', '.questionForm .trueOrFalse', function () {
            $(this).siblings('input[type=radio]').trigger('click');
        });

        // 编辑试题
        questionListWrapper.on('click', '.question-wrapper a.edit', function (e) {
            e.preventDefault();
            var that = $(this);
            $.ajax({
                url: 'fine.json',
                type: 'get',
                data: {id: '123'}
            }).done(function (response) {
                if (response.status) {
                    var questionWrapper = that.parent().parent();
                    that.parent().hide();
                    questionWrapper.append(questionEditTpl());
                    that.parent().siblings('.questionForm').find('.question-type').val(response.data.type).trigger('change');
                    var html = "";
                    // 试题内容
                    switch (response.data.type) {
                        case 1:
                            $.each(response.data.options, function (index, item) {
                                html += '       <div class="question-option">';
                                html += '           <input type="radio" name="trueOrFalse" title="判断题选项"' + (item.isAnswer === true ? 'checked' : '') + '>';
                                html += '           <label class="label trueOrFalse">' + item.text + '</label>';
                                html += '       </div>';
                            });
                            break;
                        case 2:
                            $.each(response.data.options, function (index, item) {
                                html += '       <div class="question-option">';
                                html += '            <input type="radio" name="radio" title="单选题选项"' + (item.isAnswer === true ? 'checked' : '') + '>';
                                html += '            <input type="text" title="单选题选项内容" value="' + item.text + '">';
                                html += '       </div>';
                            });
                            html += '       <a class="btn btn-primary add-option" href="javascript:"><i class="icon-plus"></i></a>';
                            break;
                        case 3:
                            $.each(response.data.options, function (index, item) {
                                html += '       <div class="question-option">';
                                html += '             <input type="checkbox" name="checkbox" title="复选题选项" ' + (item.isAnswer === true ? 'checked' : '') + '>';
                                html += '             <input type="text" title="复选题选项内容" value="' + item.text + '">';
                                html += '       </div>';
                            });
                            html += '       <a class="btn btn-primary add-option" href="javascript:"><i class="icon-plus"></i></a>';
                            break;
                        case 4:
                            break;
                        case 5:
                            break;
                        default:
                            break;
                    }
                    that.parent().siblings('.questionForm').find('.question-type-pane[data-type="' + response.data.type + '"]').html(html);
                } else {
                    console.error('无数据');
                }
            }).fail(function () {
                console.error('数据获取异常');
            });
        });

        // 删除试题
        questionListWrapper.on('click', '.question-wrapper a.remove', function (e) {
            e.preventDefault();
            $(this).parent().parent().remove();
        });

        // 上移试题
        questionListWrapper.on('click', '.question-wrapper a.up', function (e) {
            e.preventDefault();
            if ($(this).parent().parent().prevAll().length > 0) {
//                $(this).parent().prev().data('order', $(this).parent().data('order'));
//                $(this).parent().data('order', $(this).parent().data('order') - 1);
                $(this).parent().parent().prev().before($(this).parent().parent());
            }
        });

        // 下移试题
        questionListWrapper.on('click', '.question-wrapper a.down', function (e) {
            e.preventDefault();
            if ($(this).parent().parent().nextAll().length > 0) {
//                $(this).parent().next().data('order', $(this).parent().data('order'));
//                $(this).parent().data('order', $(this).parent().data('order') + 1);
                $(this).parent().parent().next().after($(this).parent().parent());
            }
        });

        // 添加选项（仅单选题及多选题需要）
        $(document).on('click', '.question-type-pane a.add-option', function () {
            var parent = $(this).parent(),
                parentType = parent.data('type');
            var html = "";
            html += "<div class='question-option'>";
            if (parentType === 2) {
                html += "<input type='radio' name='radio' title='单选题选项'>";
                html += "<input type='text' title='单选题选项内容'>";
            } else if (parentType === 3) {
                html += "<input type='checkbox' name='checkbox' title='复选题选项'>";
                html += "<input type='text' title='复选题选项内容'>";
            } else {
                console.error('不允许该部分添加选项！');
                return false;
            }
            html += "</div>";
            $(this).before(html);
        });

        // 保存新增试题
        $(document).on('click', '.addQuestionWrapper .btn-save-title', function () {
            // TODO:ajax发送请求，新增该试题，新增成功返回模拟数据格式的数据并将数据拼接进元素内容
            var that = $(this);
            $.ajax({
                url: 'fine.json',
                type: 'post',
                data: {id: '123'}
            }).done(function (response) {
                if (response.status) {
                    var str = questionTpl(response.data);
                    questionListWrapper.append(str);
                    that.parent().remove();
//                    resetQuestionForm();
                    $('.btn-add-title').show();
                    $('.addQuestionWrapper').removeClass('active');
                } else {
                    console.error('无数据');
                }
            }).fail(function () {
                console.error('数据获取异常');
            });

        });

        // 保存编辑试题
        questionListWrapper.on('click', '.btn-save-title', function () {
            // TODO:ajax发送请求，保存该试题，保存成功返回模拟数据格式的数据并将数据拼接进元素内容
            var that = $(this);
            $.ajax({
                url: 'fine.json',
                type: 'post',
                data: {id: '123'}
            }).done(function (response) {
                if (response.status) {
                    var str = questionTpl(response.data);
//                    resetQuestionForm();
                    that.parents('.question-wrapper').before(str).remove();
                } else {
                    console.error('无数据');
                }
            }).fail(function () {
                console.error('数据获取异常');
            });
        });

        // 重置新建试题表单
        function resetQuestionForm() {
            $('.addQuestionWrapper .question-type').val('1').trigger('change');
            $('.question-type-pane[data-type="1"]').find('input[type=radio]').eq(0).trigger('click');
            $('.question-type-pane[data-type="2"]').find('input[type=radio]').eq(0).trigger('click');
            $('.question-type-pane[data-type="3"]').find('input[type=checkbox]').prop('checked', false);
            $('.addQuestionWrapper input,.addQuestionWrapper textarea').val('');
        }

        // 试题模板
        function questionTpl(data) {
            if (data !== null && data !== undefined && data !== "") {
                var html = "";
                html += '<div class="question-wrapper" data-id="' + data.id + '">';
                html += '   <div class="question-inner">';
                html += '       <p class="question-title">' + data.title + '</p>';
                html += '       <ul class="option">';
                $.each(data.options, function (index, item) {
                    html += '           <li class="' + (item.isAnswer === true ? 'selected' : '') + '">' + item.text + '</li>'
                });
                html += '       </ul>';
                html += '       <p class="question-answer">答案：' + data.answerText + '</p>';
                html += '       <p class="question-analysis">解析：' + data.analysis + '</p>';
                html += '       <div class="question-score-wrapper">';
                html += '           <input type="number" name="score" value="' + data.score + '" title="试题分数">分';
                html += '       </div>';
                html += '       <a class="edit" href="javascript:"><i class="icon-edit"></i>编辑</a>';
                html += '       <a class="remove" href="javascript:"><i class="icon-trash"></i>删除</a>';
                html += '       <a class="up" href="javascript:"><i class="icon-chevron-up"></i>上移</a>';
                html += '       <a class="down" href="javascript:"><i class="icon-chevron-down"></i>下移</a>';
                html += '   </div>';
                html += '</div>';
                return html;
            } else {
                console.error('试题模板数据不能为空！');
            }
        }

        // 试题编辑模板
        function questionEditTpl() {
            var html = "";
            html += '<div class="questionForm">';
            html += '<select class="question-type" style="width: 200px;" title="题型"><option value="1" selected>判断题</option><option value="2">单选题</option><option value="3">多选题</option><option value="4">填空题</option><option value="5">简答题</option></select>';
            html += '<div class="question-setting-wrapper">';
            html += '   <div class="descPane"></div>';
            html += '   <div class="question-type-pane active" data-type="1">';
            html += '       <div class="question-option">';
            html += '           <input type="radio" name="trueOrFalse" title="判断题选项" checked>';
            html += '           <label class="label trueOrFalse">正确</label>';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '           <input type="radio" name="trueOrFalse" title="判断题选项">';
            html += '           <label class="label trueOrFalse">错误</label>';
            html += '       </div>';
            html += '   </div>';
            html += '   <div class="question-type-pane" data-type="2">';
            html += '       <div class="question-option">';
            html += '            <input type="radio" name="radio" title="单选题选项" checked>';
            html += '            <input type="text" title="单选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '             <input type="radio" name="radio" title="单选题选项">';
            html += '             <input type="text" title="单选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '             <input type="radio" name="radio" title="单选题选项">';
            html += '             <input type="text" title="单选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '             <input type="radio" name="radio" title="单选题选项">';
            html += '             <input type="text" title="单选题选项内容">';
            html += '       </div>';
            html += '       <a class="btn btn-primary add-option" href="javascript:"><i class="icon-plus"></i></a>';
            html += '   </div>';
            html += '   <div class="question-type-pane" data-type="3">';
            html += '       <div class="question-option">';
            html += '             <input type="checkbox" name="checkbox" title="复选题选项">';
            html += '             <input type="text" title="复选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '             <input type="checkbox" name="checkbox" title="复选题选项">';
            html += '             <input type="text" title="复选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '              <input type="checkbox" name="checkbox" title="复选题选项">';
            html += '              <input type="text" title="复选题选项内容">';
            html += '       </div>';
            html += '       <div class="question-option">';
            html += '              <input type="checkbox" name="checkbox" title="复选题选项">';
            html += '              <input type="text" title="复选题选项内容">';
            html += '       </div>';
            html += '       <a class="btn btn-primary add-option" href="javascript:"><i class="icon-plus"></i></a>';
            html += '   </div>';
            html += '   <div class="question-type-pane" data-type="4">';
            html += '   </div>';
            html += '   <div class="question-type-pane" data-type="5">';
            html += '   </div>';
            html += '   <div class="analysisPane"></div>';
            html += '</div>';
            html += '<a class="btn btn-primary btn-save-title">保存</a>';
            html += '</div>';
            return html;
        }

        // 保存试卷
        $('#savePaper').on('click', function (e) {
            var selectors = $('.question-list-wrapper .question-wrapper');
            if (selectors.length > 0) {
                if ($('.addQuestionWrapper').hasClass('active')) {
                    console.error('请先保存未完成的试题！'); // 提示框
                    e.stopPropagation();
                } else {
                    $.each(selectors, function (index, item) {
//                        console.log($(item).data('id'));
                    });
                    $('.ui-step-next').trigger('click');
                }
            } else {
                console.error('试卷试题不能少于1道！'); // 提示框
            }
        });

        // TODO:考试倒计时 .参数：分钟
        function backTimer(time) {
            var seconds = time * 60;
            window.setInterval(function () {
                var day = 0,
                    hour = 0,
                    minute = 0,
                    second = 0;//时间默认值
                if (seconds > 0) {
                    day = Math.floor(seconds / (60 * 60 * 24));
                    hour = Math.floor(seconds / (60 * 60)) - (day * 24);
                    minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $('#day_show').html(day + "天");
                $('#hour_show').html('<s id="h"></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                seconds--;
            }, 1000);
        }

//        $('form').on('submit', function() {
//            var title = $('inpur[name=title]').val(),
//                content = $('textarea').val();
//
//            $(this).ajaxSubmit({
//                type: 'post', // 提交方式 get/post
//                url: 'your url', // 需要提交的 url
//                data: {
//                    'title': title,
//                    'content': content
//                },
//                success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
//                    // 此处可对 data 作相关处理
//                    alert('提交成功！');
//                }
//                $(this).resetForm(); // 提交后重置表单
//        });
//            return false; // 阻止表单自动提交事件
//        });

    })();
</script>
</body>
</html>
